<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src='https://cdn.bootcss.com/echarts/3.7.0/echarts.simple.js'></script>
<script src='./js/plugins/wordcloud/echarts-wordcloud.min.js'></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>

<!-- Bootstrap -->
<link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<title>微博舆情热点演示</title>
</head>
<body>
	<style>
html, body, #main {
	width: 100%;
	height: 100%;
	margin: 0;
}

</style>
	<div class="container">
		<div class="row center-block">
			<form role="form">
				<div class="form-group">
					<!-- <label for="name">项目说明</label> -->
					<textarea readonly="readonly" class="form-control" rows="3">
基于新浪微博2012年的全年52周共364天合计2.2亿条数据，借助天亮教育星云大数据平台的存储与计算能力，通过数据仓库ETL处理、数据挖掘之关键词提取、JavaWeb构建后端服务和前端展示三个模块统一开发，挖掘出一年的52周内每天的微博平台的实时热词,用以作为新闻素财、视频推荐、商品推荐的依据，从而达到提高点击率、购买率的目标。
以下为抽样展示!
					</textarea>
				</div>
			</form>
		</div>
		<div class="row center-block ">
			<div class="btn-group">
				<button class="btn btn-lg btn-default" type="button">2012年</button>
				<button onclick="doChange('data','20120102')" class="btn btn-lg btn-primary"
					type="button">20120102</button>
				<button onclick="doChange('data','20120601')" class="btn btn-lg btn-primary"
					type="button">20120601</button>
				<button onclick="doChange('data','20120801')" class="btn btn-lg btn-primary"
					type="button">20120801</button>
				<button onclick="doChange('data','20121001')" class="btn btn-lg btn-primary"
					type="button">20121001</button>
				<button onclick="doChange('data','20121224')" class="btn btn-lg btn-primary"
					type="button">20121224</button>
				
				<div class="btn-group">
					<button type="button" class="btn btn-lg btn-success">形状</button>
					<button type="button"
						class="btn btn-lg btn-success dropdown-toggle"
						data-toggle="dropdown">
						<span class="caret"></span> <span class="sr-only">切换下拉菜单</span>
					</button>
					<ul class="dropdown-menu" role="menu">
						<li><a href="#" onclick="doChange('shape','pentagon')">五角形</a></li>
						<li><a href="#" onclick="doChange('shape','star')">星形</a></li>
						<li class="divider"></li>
						<li><a href="#" onclick="doChange('shape','cardioid')">心型</a></li>
						<li><a href="#" onclick="doChange('shape','circle')">圆型</a></li>
					</ul>
				</div>

			</div>
		</div>
	</div>
	<div id='main'></div>
	<script th:inline="javascript">
var wordJsonString = [[${result}]];
var wordJsonArray = eval(wordJsonString);
</script>

	<script>
		var chart = echarts.init(document.getElementById('main'));

		var option = {
			tooltip : {},
			series : [ {
				type : 'wordCloud',
				gridSize : 2,
				sizeRange : [ 13, 70 ],
				rotationRange : [ -80, 80 ],
				shape : 'star',
				top: 'top',
				width : 1000,
				height : 600,
				drawOutOfBound : true,
				textStyle : {
					normal : {
						color : function() {
							return 'rgb('
									+ [ Math.round(Math.random() * 160),
											Math.round(Math.random() * 160),
											Math.round(Math.random() * 160) ]
											.join(',') + ')';
						}
					},
					emphasis : {
						shadowBlur : 10,
						shadowColor : '#333'
					}
				},
				data :wordJsonArray
			} ]
		};
		chart.setOption(option);
		window.onresize = chart.resize;
		
		function doChange(type,obj){
			if(type=="data"){
				$.ajax({
					url : '/tianliangedu/wordcloud_json',
					data : "day_seq=" + obj,
					cache : false,//false是不缓存，true为缓存
					async : true,//true为异步，false为同步
					beforeSend : function() {
						//请求前
					},
					success : function(result) {
						try {
							jsonArray = JSON.parse(result);
							option.series[0].data=jsonArray;
							chart.setOption(option);
						} catch (e) {
						}
					},
					complete : function() {
						//请求结束时
					},
					error : function() {
						//请求失败时
					}
				})
			}
			else {
				option.series[0].shape=obj;
				chart.setOption(option);
			}
		}
		
	</script>
</body>
</html>